<template>
  <div>
    <div class="menuDescriptionBox">
      <i class="fa fa-question-circle-o fa-lg"></i>
      <span class="menuDescTitle">应用接口演示说明：</span>
      <div
        class="menuDesc"
      >在应用接口演示中，我们通过一个标准的应用业务模板来向您展示该应用类型的产品所具备的一功能演示，以及使用到的相关接口，方便您在开发时直接通过视图直接查看接口的使用方式</div>
    </div>
    <div class="applicationApiDemoTitle"><i class="fa fa-product-hunt"></i>当前演示应用产品：CMS内容管理系统
      <div class="selectApplicationProduct">
        切换产品：<el-select style="position:relative;top:-3px;" v-model="apiProductType" @change="apiProductTypeSelected" size="mini" placeholder="请选择要切换的产品">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      </div>
    </div>
    <div class="applicationApiDemoBox">
      <template v-if="apiProductType == '0'">
        <component v-bind:is="nowComponents"></component>
      </template>
      <template v-if="apiProductType == '1'">
        <div style="width:100%;height:500px;line-height:480px;text-align:center;font-size:16px;">
          商城管理系统正在开发，敬请期待......
        </div>
      </template>
      <div class="applicationApiDemoMaskBox" v-if="apiInfoPreviewIsShow"></div>
    </div>

    <!--api接口信息视图-->
    <div class="apiInfoPreviewBox" v-if="apiInfoPreviewIsShow">
      <div class="apiInfoPreviewTitle" @click="closeApiInfoPreviewBox"><i class="fa fa-file-text-o"></i>选择部分api说明：<span><i class="fa fa-window-close"></i>关闭</span></div>
      <div class="apiInfoPreviewResultContent">
        <mavon-editor v-model="apiResultData" :toolbarsFlag="false" :subfield="false" :editable="false" defaultOpen="preview" :boxShadow="false" :placeholder="placeholder" />
      </div>
    </div>

  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import CmsIndex from './CMS-index.vue'
import CmsLogin from './CMS-login.vue'

export default {
  components: {
    CmsIndex : CmsIndex,
    CmsLogin : CmsLogin
  },
  //数据源
  data() {
    return {
      options: [
        {
          value: '0',
          label: 'CMS内容管理系统'
        }, 
        {
          value: '1',
          label: '商城管理系统'
        }
      ],
      placeholder    : " ",
      apiResultData  : '',
      apiInfoPreviewIsShow : false,
      lastScrollTop  : 0,
      nowComponents  : 'CmsIndex',
      apiProductType : '0' //产品类型 0-CMS 1-商城....
    };
  },
  //初始化函数
  mounted() {

    console.log(this.apiResultData);

    //处理事件绑定
    this.eventAction();

  },
  //计算属性
  computed: {
    // ...mapState({ })
  },
  //组件方法
  methods: {
    eventAction(){

      //加载cms登录界面
      this.$EventBus.$on("cmsLoginAction",()=>{
        this.nowComponents = 'CmsLogin'
      })

      //cms接口查看
      this.$EventBus.$on("cms_showApiInfoPreview",(apiName)=>{

        this.lastScrollTop = $('.main_content').scrollTop();
        $('.main_content').scrollTop(0);
        $('.main_content').css('overflow','hidden');

        //读取接口文档
        this.$myLoading.startLoading()
        $.get("/static/apiRm/CMS/" + apiName + ".md",(rs)=>{
          this.apiInfoPreviewIsShow = true
          this.apiResultData = rs
          this.$myLoading.endLoading()
        })
      })


    },
    apiProductTypeSelected(val){
      
    },
    closeApiInfoPreviewBox(){
      $('.main_content').css('overflow','auto');
      $('.main_content').scrollTop(this.lastScrollTop);
      
      this.apiInfoPreviewIsShow = false
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';

.apiInfoPreviewBox {
  position absolute
  top 0px
  left 0px
  right 0px
  z-index 9999
  bottom 0px
  background #fff
  overflow auto

  .apiInfoPreviewResultContent {
    width 100%
    height auto
    overflow auto
  }

  .apiInfoPreviewName {
    width 100%
    height 30px
    box-sizing border-box

    span {
      color #999
    }
  }

  .apiInfoPreviewTitle {
    width 100%
    height 40px
    line-height 40px
    background #fff
    padding-left 10px
    box-sizing border-box

    span {
      float right
      margin-right 10px
      cursor pointer
    }

    i {
      margin-right 5px
    }
  }
}

.applicationApiDemoTitle {
  width 100%
  height 40px
  line-height 40px
  font-size 15px
  box-sizing border-box

  .selectApplicationProduct {
    width auto
    height 40px
    float right
  }

  i {
    margin-right 5px;
    font-size 15px
  }
}

.applicationApiDemoBox {
  width: 100%;
  height: auto;
  background: #fefefe;
  border: 1px solid #eee;
  padding-bottom 0px
  position relative

  .applicationApiDemoMaskBox {
    position absolute
    top 0px
    left 0px
    bottom 0px
    right 0px
    z-index 999
    background-color rgba(0,0,0,0.7)  
  }

  
}
</style>